<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="css/fullcalendar.css" />
    <link rel="stylesheet" href="css/matrix-style2.css" />
    <link rel="stylesheet" href="css/matrix-media.css" />
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

    <!--***********许永霖*********-->

    <!---->
    <style>
        .dataTables_filter input{display: none}
        .dataTables_filter{display: none}
        select[multiple], select{display: none}
        .dataTables_length{display: none}
        * li{ list-style-type: none;}
    .renyuan_count{
        float: left;
        margin-left: 0px;
        margin-bottom: 0px;
        width:55%;
        height: 230px;
        /*background-color: #ededed;*/
        /*background-color: #ffffff;*/
    }

        .widget-title{
            margin-left: 1%;
        }

    .renyuan_count ul{
        /*margin-left: 5px;*/
        width:100%;
        height:160px;
        /*background-color:#989898;*/
    }
    .renyuan_count ul li{
       /*margin-top: 1px;*/
        /*margin-left: 1px;*/
        float: left;
        color: #696969;
        list-style-type: none;
        width:25%;
        height: 2.5rem;
        text-align:left;
        background-color: #f7f7f7;
        padding-left: 60px;
        line-height: 40px;
    }

        .gradeX>td{text-align: center}
        .table{
            margin-left: 20px;
        }
    .widget-content{width: 35%; height: 200px ;
    /*background-color: #68a8c7;*/
    float: left;margin-top: 0px;margin-left: 5%;padding:0px }

        .unstyled>li{
            margin:0px 3%;

            /*background-color: #00C1B3;*/

        }

    </style>
</head>
<body>

<div id="content">
    <div id="content-header">
        <h1>考勤管理</h1>
    </div>
    <!--<div style="position: relative;left: 0; right: 0;width: 1050px; margin: auto;">-->
  <!--  <div class="renyuan_count">
        <div class="widget-title"> <span class="icon"> <i class="icon-list"></i> </span>
            <h5><code>项目名称：武汉民族大道光谷地铁站</code></h5>
        </div>
        <ul>
          <li >当前人数：111人</li>
          <li >施工人员：100人</li>
            <li >特种作业：15人</li>
            <li style="background-color: white">水泥工&nbsp&nbsp ：50人</li>
            <li style="background-color: white">钢筋工&nbsp&nbsp ：10人</li>
            <li style="background-color: white">土木工&nbsp&nbsp ：5人</li>
            <li class="hui">架子工&nbsp&nbsp ：5人</li>
            <li class="hui">防水工&nbsp&nbsp ：5人</li>
            <li class="hui">砌筑工&nbsp&nbsp ：7人</li>
            <li style="background-color: white">塔吊工&nbsp&nbsp ：5人</li>
          <li style="background-color: white">监理&nbsp&nbsp &nbsp&nbsp ：7人</li>
          <li style="background-color: white ;color: red ;cursor: pointer;">未到&nbsp&nbsp &nbsp&nbsp ：2人</li>
      </ul>
    </div>-->
    <div class="widget-title"> <span class="icon"> <i class="icon-list"></i> </span>
        <h5><code>项目名称：武汉市金地天悦</code></h5>
    </div>
    <table class="table table-bordered table-striped " >

        <tbody>
        <tr class="even gradeC">
            <td>当前人数：111人</td>
            <td>施工人员：100人</td>
            <td>特种作业：15人</td>
            <td class="center">未到人数：2人</td>
        </tr>
        <tr class="odd gradeA">
            <td>水泥工&nbsp&nbsp ：50人</td>
            <td>钢筋工&nbsp&nbsp ：10人</td>
            <td>土木工&nbsp&nbsp ：5人</td>
            <td class="center">架子工&nbsp&nbsp ：5人</td>

        </tr>
        <tr class="even gradeA">
            <td>防水工&nbsp&nbsp ：5人</td>
            <td>砌筑工&nbsp&nbsp ：7人</td>
            <td>塔吊工&nbsp&nbsp ：5人</td>
            <td class="center">监理&nbsp&nbsp &nbsp&nbsp ：7人</td>

        </tr>
        </tbody>
    </table>
    <!--<div class="widget-content">
        <div class="widget-title" style="margin-top: 0px"> <span class="icon"> <i class="icon-list"></i> </span>
            <h5><code>项目进度表</code></h5>
        </div>
        <ul class="unstyled" >
            <li> <span class="icon24 icomoon-icon-arrow-up-2 green"></span> 项目总进度：81%  <span class="pull-right strong">总时长10个月</span>
                <div class="progress progress-striped active">
                    <div style="width: 81%;" class="bar"></div>
                </div>
            </li>
            <li> <span class="icon24 icomoon-icon-arrow-up-2 green"></span> 昨日完成情况：95% <span class="pull-right strong"></span>
                <div class="progress progress-success progress-striped active">
                    <div style="width: 95%;" class="bar"></div>
                </div>
            </li>
            <li> <span class="icon24 icomoon-icon-arrow-down-2 red"></span> 昨日未完成：5% <span class="pull-right strong"></span>
                <div class="progress progress-warning progress-striped active">
                    <div style="width: 5%;" class="bar"></div>
                </div>
            </li>
        </ul>
    </div>-->
	<!--</div>-->
    <!--<div class="widget-content nopadding">-->
    <div class="widget-title"> <span class="icon"> <i class="icon-list"></i> </span>
        <h5>考勤记录表</h5>
    </div>
    <div class="widget-content nopadding ">
        <table class="table table-bordered data-table " >
            <thead id="tb" >
 <!--       <table class="table table-bordered data-table">
            <thead id="tb">
            <tr>-->
                <th>#</th>
                <th>员工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>电话</th>
                <th>工种类别</th>
                <th>进入时间</th>
                <th>出门时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr></tr>
       <!--     <tr class="gradeX">
                <td>20130501</td>
                <td>张亮</td>
                <td>男</td>
                <td>35</td>
                <td>13566521458</td>
                <td>建筑电工</td>
                <td>2017/8/10 7:29</td>
                <td>2017/8/10 18:00</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20120502</td>
                <td>王强</td>
                <td>男</td>
                <td>40</td>
                <td>13320322568</td>
                <td>建筑架子工</td>
                <td>2017/8/10 7:27</td>
                <td>2017/8/10 18:02</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20160203</td>
                <td>李力</td>
                <td>男</td>
                <td>38</td>
                <td>13725843156</td>
                <td>建筑起重信号工</td>
                <td>2017/8/10 7:26</td>
                <td>2017/8/10 18:03</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20140603</td>
                <td>郭靖</td>
                <td>男</td>
                <td>32</td>
                <td>13325478964</td>
                <td>建筑起重机械司机</td>
                <td>2017/8/10 7:25</td>
                <td>2017/8/10 18:01</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20110205</td>
                <td>王琦</td>
                <td>女</td>
                <td>42</td>
                <td>13002541574</td>
                <td>建筑起重机械安装拆卸工</td>
                <td>2017/8/10 7:24</td>
                <td>2017/8/10 18:04</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20140206</td>
                <td>赵信</td>
                <td>男</td>
                <td>43</td>
                <td>13369857485</td>
                <td>建筑焊工</td>
                <td>2017/8/10 7:22</td>
                <td>2017/8/10 18:05</td>
                <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
                <tr class="gradeX">
                <td>20150308</td>
                <td>王朝强</td>
                <td>男</td>
                <td>39</td>
                <td>13634869512</td>
                <td>建筑塔吊工</td>
                <td>2017/8/10 7:23</td>
                <td>2017/8/10 18:05</td>
            <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
                <tr class="gradeX">
                <td>20140509</td>
                <td>赵清龙</td>
                <td>男</td>
                <td>39</td>
                <td>13320113659</td>
                <td>建筑架子工</td>
                <td>2017/8/10 7:24</td>
                <td>2017/8/10 18:05</td>
            <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
            <tr class="gradeX">
                <td>20140510</td>
                <td>王凯</td>
                <td>男</td>
                <td>38</td>
                <td>13563968569</td>
                <td>建筑中小型机械操作工</td>
                <td>2017/8/10 7:27</td>
                <td>2017/8/10 18:05</td>
            <td class="td-btn"><button class="btn btn-info" style="margin-right: 10px;">编辑</button><button class="btn btn-danger">删除</button></td>
            </tr>
-->
            </tbody>
        </table>
        </div>
    <!--</div>-->
    </div>

</div>

<!--<script src="js/jquery.min.js"></script>-->
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/matrix.js"></script>
<script src="js/matrix.tables.js"></script>
<!--许永霖-->
<script>

    window.onload = function () {
        var datanav = [
            { "usernum":"20130501","name": "张亮", "sex": "男", "age": "35", "phone": "13566521458","worktype":"建筑电工","intime":"2017/8/10 7:29","outtime":"2017/8/10 18:00","operation":"编辑  删除" },

        ];
        var tb = document.getElementById("tb");
        for (var i = 0; i < datanav.length; i++) {
            var row = tb.insertRow(tb.rows.length);
            var c0 = row.insertCell(0);
            c0.innerHTML = i+1;
            var c1 = row.insertCell(1);
            c1.innerHTML = datanav[i].usernum;
            var c2 = row.insertCell(2);
            c2.innerHTML = datanav[i].name;
            var c3 = row.insertCell(3);
            c3.innerHTML = datanav[i].sex;
            var c4 = row.insertCell(4);
            c4.innerHTML = datanav[i].age;
            var c5 = row.insertCell(5);
            c5.innerHTML = datanav[i].phone;
            var c6 = row.insertCell(6);
            c6.innerHTML = datanav[i].worktype;
            var c7 = row.insertCell(7);
            c7.innerHTML = datanav[i].intime;
            var c8 = row.insertCell(8);
            c8.innerHTML = datanav[i].outtime;
            var c9 = row.insertCell(9);
            c9.innerHTML = datanav[i].operation;
   /*         var c10 = row.insertCell(10);
            c10.innerHTML = datanav[i].worktype;
            var c11 = row.insertCell(11);
            c11.innerHTML = datanav[i].level;
            var c12 = row.insertCell(12);
            c12.innerHTML = datanav[i].zuoyeleibie;
            var c13 = row.insertCell(13);
            c13.innerHTML = datanav[i].attendance;
            var c14 = row.insertCell(14);
            c14.innerHTML = datanav[i].operation;*/

        }
    }
</script>

</body>
</html>
